<template>
	<div class="mt-4">
		<Search :lookup="data.lookup" @investigate="inves" />

		<div class="mb-4">
			<el-button v-if="isLock" type="danger" @click="onLock" icon="Lock" :title="$t('machine.goods.unlockPrice')"
				v-prmis="'channel_lockPrice'">{{ $t('machine.goods.sellingPrice') }}</el-button>
			<el-button v-else type="success" @click="onUnlock" icon="Unlock" :title="$t('machine.goods.lockPrice')"
				v-prmis="'channel_lockPrice'">{{ $t('machine.goods.sellingPrice') }}</el-button>
			<el-button type="primary" @click="getspread" v-prmis="'machine_goods_exportMg'">{{ $t('public.export') }}</el-button>
			<el-button type="primary" @click="onSync" v-prmis="'goods_synchronizationGoods'"
				:title="$t('machine.goods.syncClick')">
				{{ $t('machine.goods.sync') }}
			</el-button>
		</div>

		<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
			:cell-style="{ 'text-align': 'center' }" class="w-full" v-loading="data.mtloading">

			<el-table-column :label="$t('machine.goods.pic')" prop="pic">
				<template #default="scope">
					<div class="w-20 h-20 inline-block">
						<img :src="scope.row.pic || product" />
					</div>
				</template>
			</el-table-column>

			<el-table-column :label="$t('machine.goods.name')" prop="g_name">
				<template #default="scope">
					{{ scope.row.g_name || '--' }}
				</template>
			</el-table-column>

			<el-table-column label="SKU" prop="sku">
				<template #default="scope">
					{{ scope.row.sku || '--' }}
				</template>
			</el-table-column>

			<el-table-column :label="$t('machine.goods.cost')+'/'+$t('machine.goods.market')+'/'+$t('machine.channel.price')" prop="cost_price">
				<template #default="scope">
					{{ scope.row.cost_price }} / {{ scope.row.market_price }} / {{ scope.row.retail_price }}
				</template>
			</el-table-column>
			<el-table-column :label="$t('machine.goods.put')" prop="is_shelf">
				<template #default="scope">
					<el-tag v-if="scope.row.is_shelf == 1" type="success">{{$t('machine.goods.puted')}}</el-tag>
					<el-tag v-else type="danger">{{$t('machine.goods.unPut')}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column :label="$t('machine.goods.inve')" prop="available_stock">
				<template #default="scope">
					{{ scope.row.available_stock || '0' }}
				</template>
			</el-table-column>

			<el-table-column :label="$t('machine.goods.unInve')" prop="disabled_stock">
				<template #default="scope">
					{{ scope.row.disabled_stock || '0' }}
				</template>
			</el-table-column>

			<el-table-column :label="$t('machine.goods.reserve')" prop="reserve_stock">
				<template #default="scope">
					{{ scope.row.reserve_stock || '0' }}
				</template>
			</el-table-column>

			<el-table-column :label="$t('machine.goods.reserveInve')" prop="standby_stock">
				<template #default="scope">
					{{ scope.row.standby_stock || '0' }}
				</template>
			</el-table-column>

			<el-table-column :label="$t('public.operate')">
				<template #default="scope">
					<el-button size="small" type="primary" @click="modify(scope.row)" v-prmis="'machine_goods_update'">
						{{$t('public.edit')}}
					</el-button>
					<el-button size="small" type="success" @click="onSync(scope.row)" v-prmis="'goods_synchronizationGoods'"
					:title="$t('machine.goods.syncClick')">
					{{ $t('machine.goods.sync') }}
					</el-button>
				</template>

			</el-table-column>

		</el-table>
		<PageNum :total="data.total" :page="data.godinfo" @exposeData="current" @fraction="fraction" />
		<el-dialog v-model="data.goodsstatus" :title="data.editinfo.g_name" center width="40%">
			<el-form :model="data.editinfo" :inline="true" label-width="120">

				<el-form-item :label="$t('machine.goods.costPrice')+':'" prop="cost_price" class="w-10/12">
					<el-input v-model="data.editinfo.cost_price" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>

				<el-form-item :label="$t('machine.goods.marketValue')+':'" prop="market_price" class="w-10/12">
					<el-input v-model="data.editinfo.market_price" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>

				<el-form-item :label="$t('machine.channel.price')+':'" prop="retail_price" class="w-10/12">
					<el-input v-model="data.editinfo.retail_price" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>

				<div class="w-full text-center">
					<div class="inline-block">
						<el-button type="primary" @click="submit()">{{ $t('public.save')}}</el-button>
						<el-button @click="data.goodsstatus = false">{{ $t('public.cancel')}}</el-button>
					</div>
				</div>

			</el-form>
		</el-dialog>
		<exports :dialogVisible="dialogExport" @close="dialogExport = false" />
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import Search from '@/components/Search/index.vue';
import product from '@/assets/product.png';
import PageNum from '@/components/PageNum/index.vue';
import { ElMessage, ElMessageBox } from "element-plus";
import { getmacgoodsList, updategoods, getgoodsexportMg, lockPrice, getchannelList, synchronizationGoods } from '@/api/machine';
import exports from '@/components/export.vue';
import { useRoute } from "vue-router";
let props = defineProps({
	info: {
		type: Object,
		default: {}
	}
})
let isLock = ref(false)
const route = useRoute()
const dialogExport = ref(false)
let data = reactive({
	mtloading: false, // 加载
	goodsstatus: false, // 弹窗
	godinfo: {
		page: 1,
		pageNum: 15,
		g_name:'',
		sku:'',
		is_shelf: 0
	}, // 商品信息
	editinfo: {
		mg_id: '',
		g_name: '',
		cost_price: 0,
		market_price: 0,
		retail_price: 0
	}, // 编辑信息
	lookup: [ // 筛选栏
		{ title: $t('machine.goods.name'), type: 'input', value: '', key: 'g_name' },
		{ title: 'SKU', type: 'input', value: '', key: 'sku' },
		{ title: '上架', type: 'define', select: [{ label: $t('machine.goods.puted'), value: 1 }, { label:  $t('machine.goods.unPut'), value: 2 },], value: '', key: 'is_shelf' }
	],
	total: 0, // 总条数
	list: [], // 列表信息
})
let onSync = (row: any) => {
	ElMessageBox.confirm(`请确认是否同步? 确认同步后，会从商品核心库同步价格至设备商品，并会同步至设备货架上。`)
		.then(res => {
			let query_obj = JSON.parse(decodeURI(route.query.l))
			let pram = {
				m_id: query_obj.id
			}
			let parm2 ={
				mg_id: row.mg_id
			}
			synchronizationGoods(row.mg_id ? parm2: pram).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.syncSuccess'),
						type: 'success'
					})
					data.goodsstatus = false
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			}).catch(err => {
				console.log(err)
			})
		})
		.catch(err => {
			console.log('取消');
		});

}
let setLock = (type: number) => {
	let query_obj = JSON.parse(decodeURI(route.query.l))
	let pram = {
		m_id: query_obj.id,
		update_price: type
	}
	lockPrice(pram).then(res => {
		if (res.state == 200) {
			ElMessage({
				message: type == 1 ? $t('message.lockSuccess') :  $t('message.ulockSuccess'),
				type: 'success'
			})
			getlist()
			return
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		})
	})
}
let onLock = () => {
	ElMessageBox.confirm($t('message.okPlease')+ `【${props.info.machine_id}】`+ $t('message.okunlock'))
		.then(res => {
			setLock(2)
			isLock.value = false
		})
		.catch(err => {
			console.log('取消');
		});
}
let onUnlock = () => {
	ElMessageBox.confirm($t('message.oklockin')+ `【${props.info.machine_id}】` + $t('message.islocking'))
		.then(res => {
			setLock(1)
			isLock.value = true
		})
		.catch(err => {
			console.log('取消');
		});
}
// 获取列表信息
let getlist = () => {
	data.mtloading = true
	data.list = []
	let parm = {
		m_id: props.info.m_id,
		g_name: data.godinfo.g_name,
		sku: data.godinfo.sku,
		pageNum: data.godinfo.pageNum,
		page: data.godinfo.page,
		is_shelf: data.godinfo.is_shelf
	}
	getmacgoodsList(parm).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
		console.log(data.list)
	}).catch(err => {
		data.mtloading = false
	})
}

// 商品信息弹窗
let modify = (e: any) => {
	data.editinfo = {
		mg_id: e.mg_id,
		g_name: e.g_name || '',
		cost_price: e.cost_price || 0,
		market_price: e.market_price || 0,
		retail_price: e.retail_price || 0
	}
	data.goodsstatus = true
}

let submit = () => {
	let obj = {
		mg_id: data.editinfo.mg_id,
		cost_price: data.editinfo.cost_price || 0,
		market_price: data.editinfo.market_price || 0,
		retail_price: data.editinfo.retail_price || 0
	}
	updategoods(obj).then(res => {
		if (res.state == 200) {
			ElMessage({
				message: $t('message.modifySuccess'),
				type: 'success'
			})
			data.goodsstatus = false
			getlist()
			return
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		})
	}).catch(err => {
		console.log(err)
	})
}

// 页数回调
let current = (e) => {
	data.godinfo.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.godinfo.pageNum = e
	getlist()
}
// 查询回调
let inves = (e: any) => {
	for (let key in e) {
		data.godinfo[key] = e[key]
	}
	data.godinfo.page = 1
	data.godinfo.pageNum = 15
	getlist()
}

// 导出
let getspread = () => {
	let query_obj = JSON.parse(decodeURI(route.query.l))
	let obj = {
		m_id: query_obj.id,
		sku: data.godinfo.sku,
		g_name: data.godinfo.g_name
	}
	ElMessageBox.confirm($t('message.isExport')).then(res => {
		getgoodsexportMg(obj).then(res => {
			if (res.state == 200) {
				dialogExport.value = true
				getlist()
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		}).catch(err => {
			console.log(err)
		})
	})
}
// 解锁默认值
let getchanne = () => {
	getchannelList({ m_id: props.info.m_id }).then(res => {
		if (res.state == 200) {
			let arr = res.data.filter(item => {
				return item.update_price == 1
			})
			if (arr.length) {
				isLock.value = true
			}
		}
	})
}
getchanne()
getlist()

</script>
